<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Build a Personal Portfolio Webpage</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="app.css" />
	</head>

	<body>
		<div id="Top" class="pusher">

			<div class="ui inverted vertical masthead center aligned segment nav-topbar" style="background-image: url(https://semantic-ui.com/images/backgrounds/10.jpg);">
				<div class="ui fixed menu" style="height: 60px;">
					<div class="ui container urls">
						<a href="index.html" class="header item"><i class="tv icon"></i>Xwltz</a>
						<a id="top" href="#Top" class="item active"><i class="home icon"></i>Home</a>
						<a id="portfolio" href="#Portfolio" class="item"><i class="unordered list icon"></i>Portfolio</a>
					</div>
				</div>
				<div style="height: 60px;"></div>
				<div class="ui text">
					<h1 class="ui inverted header">Xwltz</h1>
					<div class="ui container header" style="color: #f3f3f3;">
						The full stack development engineer has a strong team spirit, a strong sense of collective honor, self-learning ability, like to learn new technologies, dare to face and overcome difficulties, have a relatively strong ability to handle, the courage to face the difficulties and challenges, there is a Good analysis of the problem and the ability to solve problems, serious and responsible work, motivated, able to work hard, have a good professional quality.
					</div>
					<h2>Full Stack Development Engineer</h2>
				</div>

			</div>

			<div id="Portfolio" class="ui vertical center stripe">
				<h4 class="ui horizontal divider header"><i class="unordered list icon"></i> Portfolio </h4>
				<div class="ui container">
					<div class="ui two column grid">
						<div class="column">
							<div class="wrap-card">
								<div class="card">
									<div class="detail">
										<img class="ui fluid rounded image" src="http://xwltz-1252948963.cossh.myqcloud.com/thumb/TIM%E6%88%AA%E5%9B%BE20180202163311.png">
										<p></p>
									</div>
								</div>
							</div>
						</div>
						<div class="column">
							<div class="wrap-card">
								<div class="card">
									<div class="detail">
										<img class="ui fluid rounded image" src="http://xwltz-1252948963.cossh.myqcloud.com/thumb/TIM%E6%88%AA%E5%9B%BE20180202163530.png">
										<p></p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ui two column grid">
						<div class="column">
							<div class="wrap-card">
								<div class="card">
									<div class="detail">
										<img class="ui fluid rounded image" src="http://xwltz-1252948963.cossh.myqcloud.com/thumb/TIM%E6%88%AA%E5%9B%BE20180202163014.png">
										<p></p>
									</div>
								</div>
							</div>
						</div>
						<div class="column">
							<div class="wrap-card">
								<div class="card">
									<div class="detail">
										<img class="ui fluid rounded image" src="http://xwltz-1252948963.cossh.myqcloud.com/thumb/TIM%E6%88%AA%E5%9B%BE20180202164059.png">
										<p></p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ui two column grid">
						<div class="column">
							<div class="wrap-card">
								<div class="card">
									<div class="detail">
										<img class="ui fluid rounded image" src="http://xwltz-1252948963.cossh.myqcloud.com/thumb/TIM%E6%88%AA%E5%9B%BE20180202164313.png">
										<p></p>
									</div>
								</div>
							</div>
						</div>
						<div class="column">
							<div class="wrap-card">
								<div class="card">
									<div class="detail">
										<img class="ui fluid rounded image" src="http://xwltz-1252948963.cossh.myqcloud.com/thumb/TIM%E6%88%AA%E5%9B%BE20180202164334.png">
										<p></p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="ui inverted vertical footer segment">
				<div class="ui container">
					<div class="ui stackable inverted divided equal height stackable grid">
						<div class="two wide column">
							<h4 class="ui inverted header">About</h4>
							<div class="ui inverted link list">
								<a href="https://weibo.com/u/2287929384" class="item" target="_blank">Weibo</a>
								<a href="https://www.linkedin.com/in/%E7%BF%94%E7%BB%B4-%E5%BC%A0-ba7b62102/" class="item" target="_blank">Linkedin</a>
								<a href="https://github.com/wwfhz123" class="item" target="_blank">GitHub</a>
								<a href="https://gitee.com/MyGit_xw" class="item" target="_blank">Gitee</a>
							</div>
						</div>
						<div class="four wide column">
							<h4 class="ui inverted header">Contact</h4>
							<div class="ui inverted link list">
								<a href="javascript:;" class="item">QQ: 61488281</a>
								<a href="javascript:;" class="item">WeChat: 18061892425</a>
								<a href="javascript:;" class="item">Email: 61488281@qq.com</a>
								<a href="javascript:;" class="item">Phone: 18061892425</a>
							</div>
						</div>
						<div class="four wide column">
							<h4 class="ui inverted header">Links</h4>
							<div class="ui inverted link list">
								<a href="https://semantic-ui.com/" class="item" target="_blank">semantic-ui</a>
								<a href="http://www.bootcdn.cn" class="item" target="_blank">BootCDN</a>
								<a href="https://freecodecamp.cn" class="item" target="_blank">freeCodeCamp</a>
								<a href="https://jquery.com" class="item" target="_blank">jquery</a>
							</div>
						</div>
						<div class="six wide column center container">
							<h4 class="ui inverted header"> Copyright </h4>
							<p> Xwltz © 2018. All Rights Reversed </p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.js"></script>
		<script src="app.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>